<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <h2>正在测试jq的ajax方法</h2>

    <input type="button" id="btn1" value="请求json">
    <input type="button" id="btn2" value="请求jsonp">
    <input type="button" id="btn3" value="请求html">
    <input type="button" id="btn4" value="get请求">
    <input type="button" id="btn5" value="post请求">
    <input type="button" id="btn6" value="带loading的请求">
    <input type="button" id="btn7" value="带超时的请求">
    <input type="button" id="btn8" value="不会触发ajax全局状态的请求">

    <div class="top"></div>
</body>
<script src="./libs/jquery.js"></script>
<script>
    // $.ajax(url, ops)
    // $.ajax(ops)
    // ops = {
    //     url:"",
    //     data:{},
    //     type:"",
    //     success:function(){},
    //     error:function(){},
    //     beforSend:function(){},
    //     timeout:1000,
    //     dataType:"",
    //     jsonp:"",
    //     global:true
    // }

    $("#btn1").click(function(){
        // 获取json文件/数据
        $.ajax({
            url:"http://localhost:3000/data/test.json",
            success:function(res){
                console.log(res);
            },
            dataType:"json"
        })
    })

    $("#btn2").click(function(){
        // 获取jsonp数据
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            data:{
                wd:"全国限电"
            },
            jsonp:"cb",
            dataType:"jsonp",
            success:function(res){
                console.log(res);
            }
        })
    })


    $("#btn3").click(function(){
        // 获取html数据
        $.ajax({
            url:"http://localhost:3000/public/header.html",
            success:function(res){
                console.log(res);
                $(".top").html(res);
            }
        })
    })


    $("#btn4").click(function(){
        // get请求数据
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getBanner"
            },
            success:function(res){
                console.log(res);
                $(".top").html(res);
            }
        })
    })

    $("#btn5").click(function(){
        // post请求数据
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getBanner"
            },
            type:"post",
            success:function(res){
                console.log(res);
                $(".top").html(res);
            }
        })
    })


    $("#btn6").click(function(){
        // 带loading效果的ajax请求
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getBanner"
            },
            success:function(res){
                console.log(JSON.parse(res));
                $(".img").remove();
            },
            error:function(){
                $(".img").remove();
            },
            beforeSend:function(){
                $("<img class='img' src='./loading.jpg'>").appendTo($("body"))
            }
        })
    })


    $("#btn7").click(function(){
        // 带超时功能的ajax请求
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getBanner"
            },
            success:function(res){
                console.log(res);
            },
            error:function(xhr, status, res){
                console.log(status);
            },
            timeout:10
        })
    })



    $("#btn8").click(function(){
        // 不会触发ajax的全局状态的ajax请求
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getBanner"
            },
            success:function(res){
                console.log(JSON.parse(res));
            },
            global:false
        })
    })



    // ajax的全局状态，类似于生命周期

    $(document).ajaxComplete(function(){
        console.log("ajaxComplete")
    })
    $(document).ajaxError(function(){
        console.log("ajaxError")
    })
    $(document).ajaxSend(function(){
        console.log("ajaxSend")
    })
    $(document).ajaxStop(function(){
        console.log("ajaxStop")
    })
    $(document).ajaxStart(function(){
        console.log("ajaxStart")
    })
    $(document).ajaxSuccess(function(){
        console.log("ajaxSuccess")
    })

</script>
</html>